<template>
  <div class="fixed top-0 bottom-0 left-0 right-0 ">
    <el-container class="h-full">
      <Nav :isCollapse="isCollapse" :defaultActive="defaultActive" :pageList="pageList"></Nav>
      <el-container style="flex-direction: column;">
        <Header v-model="isCollapse"></Header>
        <Main>
          <RouterView />
        </Main>
        <Footer></Footer>
      </el-container>
    </el-container>
  </div>

</template>

<script setup>
import { Header, Main, Nav, Footer } from '../components';
import { useRoute, useRouter, RouterView } from 'vue-router'
import { ref, onBeforeMount, watch } from 'vue'
import { useInfoStore } from '../stores/useInfoStore';



const router = useRouter()
let pageList = router.options.routes.find(item => item.name === "Home").children;
const defaultActive = ref("");
const isCollapse = ref(false)
const userinfo = useInfoStore();
onBeforeMount(() => {
  const { id, loginname } = JSON.parse(window.localStorage.getItem("userinfo") || "{}")
  userinfo.$patch({ id, loginname})
  defaultActive.value = window.location.pathname === "/" ? "/users" : window.location.pathname
  window.localStorage.getItem("token") ? "" : router.push("/login")
})
</script>

<style scoped></style>